<template>
  <div class="big-BBDetail">
    <div class="container">
      <div class="header">
        <div class="header-left">
          <img
            src="https://s3plus.meituan.net/v1/mss_65766da973d14523b3d781fe3ac2bbac/www-assets/shared/images/logo/h-transparent-v584ea975.svg"
            alt=""
          />
        </div>
        <div class="header-right">
          <div>登录查看优惠价</div>
          <div>成为房东</div>
          <div>下载App</div>
        </div>
      </div>
    </div>
    <div class="swiper-container" style="margin: 0">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    <div class="container">
      <div class="input-search">
        <button class="select-city">
          深圳
          <i class="iconfont icon-xiala-"></i>
        </button>
        <div class="input-date">
          <el-date-picker
            class="date-picker"
            v-model="value2"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :shortcuts="shortcuts"
            :size="large"
          />
        </div>
        <button class="click-search"><em>查找民宿</em></button>
      </div>
      <div class="theme">
        <div class="theme-header">主题精选</div>
        <div class="theme-content">
          <div class="single-theme">
            <img
              src="https://img.meituan.net/iphoenix/ae43e7d5eceebb43844c6e06011edab7478053.png@446w_446h_80Q_1e_1c"
              alt=""
            />
            <div class="theme-content-text">少女风</div>
          </div>
          <div class="single-theme">
            <img
              src="https://img.meituan.net/iphoenix/90a50d2c2abf18f065c937bf06e42284408607.png@446w_446h_80Q_1e_1c"
              alt=""
            />
            <div class="theme-content-text">日系清新</div>
          </div>
          <div class="single-theme">
            <img
              src="https://img.meituan.net/iphoenix/c335be7c76121a96307701a12999e405448447.png@446w_446h_80Q_1e_1c"
              alt=""
            />
            <div class="theme-content-text">聚会轰趴</div>
          </div>
        </div>
      </div>
      <div class="middle-card">
        <div class="card-single">
          <i></i>
          <div class="card-top">放心入住</div>
          <div class="card-bottom">千万保障先行赔付</div>
        </div>
        <div class="card-single">
          <i></i>
          <div class="card-top">贴心服务</div>
          <div class="card-bottom">7*24小时服务</div>
        </div>
        <div class="card-single-special">
          <i></i>
          <div class="card-top">信用认证</div>
          <div class="card-bottom">实名认证更放心</div>
        </div>
      </div>
      <div class="hot-resource">
        <div class="hot-resource-top">
          <div class="hot-resource-top-title">热门城市</div>
          <div class="hot-resource-top-content">
            <span>北京的民宿</span>
            <span>上海的民宿</span>
            <span>南京的民宿</span>
            <span>杭州的民宿</span>
            <span>厦门的民宿</span>
            <span>武汉的民宿</span>
            <span>长沙的民宿</span>
            <span>广州的民宿</span>
            <span>深圳的民宿</span>
            <span>三亚的民宿</span>
          </div>
        </div>
        <div class="hot-resource-bottom">
          <div class="hot-resource-bottom-title">热门房源</div>
          <div class="hot-resource-bottom-content">
            <span>有厨具的民宿</span>
            <span>有洗衣机的民宿</span>
            <span>有今夜特价的民宿</span>
            <span>有限时折扣的民宿</span>
            <span>适合情侣的民宿</span>
            <span>视野开阔的民宿</span>
            <span>别墅复式loft</span>
            <span>广州的民宿</span>
            <span>深圳的民宿</span>
            <span>度假民宿</span>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-item">
          <div class="information">公司信息</div>
          <div class="information-content">关于我们</div>
          <div class="information-content">工作机会</div>
        </div>
        <div class="footer-item">
          <div class="information">网站帮助</div>
          <div class="information-content">规则中心</div>
          <div class="information-content">网站地图</div>
          <div class="information-content">民宿推荐</div>
        </div>
        <div class="footer-item">
          <div class="information">人工客服</div>
          <div class="information-content">客服电话<em>400-0660-190</em></div>
          <div class="information-content">登录问题<em>10107888</em></div>
        </div>
      </div>
      <div class="qualifications">
        沪公网安备31010502000052号 沪B2-20040012 营业资质
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BBDetail",
};
</script>

<script setup>
import { ref } from "vue";
import { reactive, onMounted } from "vue";
import Swiper from "swiper"; // 引入库
import "swiper/css/swiper.css";
/******** 日期选择器 *********/
const value2 = ref("");
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
// 轮播图
onMounted(() => {
  var mySwiper = new Swiper(".swiper-container", {
    loop: true, // 循环模式选项
    pagination: {
      el: ".swiper-pagination",
    },
    effect: "fade", //渐变切换
    autoplay: {
      delay: 8000, //1秒切换一次
      pauseOnMouseEnter: true, //鼠标移入 轮播暂停
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});
let imgs = reactive([
  {
    pic: "https://img.meituan.net/iphoenix/09ec58e3673a4d6aceabd9e1151781f95251800.png.webp@2880w_460h_80Q_1e_1c",
  },
  {
    pic: "https://p0.meituan.net/scarlett/702ba21c6ee7f088625b01f3b4e46b09537984.jpg.webp@2880w_460h_80Q_1e_1c",
  },
  {
    pic: "https://p0.meituan.net/scarlett/082bc697bf06e8475b738bec094607a9434582.jpg.webp@2880w_460h_80Q_1e_1c",
  },
  {
    pic: "https://img.meituan.net/iphoenix/fae12ad6cb45735f4835276ada9cb062167115.jpg.webp@2880w_460h_80Q_1e_1c",
  },
]);
</script>

<style scoped>
.big-BBDetail {
  background-color: #ffffff;
}
.header {
  width: 1180px;
  height: 70px;
  line-height: 70px;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.header-left {
  font-size: 24px;
  font-weight: 560;
}
.header-left img {
  margin-left: 30px;
  height: 30px;
  position: absolute;
  bottom: 20px;
}
.header-right {
  font-size: 15px;
  color: #585a5a;
  width: 260px;
  display: flex;
  justify-content: space-around;
}
/* 轮播  */
.swiper-container {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}
.swiper-slide {
  width: 100% !important;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container {
  position: relative;
}
.input-search {
  display: flex;
  position: absolute;
  top: -85px;
  left: 190px;
  width: 756px;
  height: 53px;
  border: 1px solid transparent;
  border-radius: 7px;
  background-color: #ffffff;
  z-index: 999;
}
.select-city {
  width: 190px;
  border: transparent;
  border-radius: 7px;
  background-color: #ffffff;
  font-size: 16px;
}
.input-date {
  width: 437px;
  height: 55px;
  line-height: 55px;
  margin: 3px;
  border: transparent;
  border-left: 1px solid #e5e5e5;
}
.click-search {
  background-color: #ffe147;
  border: 1px solid transparent;
  width: 120px;
  height: 48px;
  margin-top: 2.5px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 540;
}
/* 日期选择器 */
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
::v-deep .el-input__wrapper {
  box-shadow: none;
}
.theme-header {
  font-size: 24px;
  font-weight: 570;
  position: relative;
  margin: 15px 0;
}
.theme-header::after {
  content: "LIST";
  color: #cbcccd;
  font-size: 10px;
  position: absolute;
  top: 4px;
}
.theme-content {
  display: flex;
  position: relative;
}
.single-theme img {
  width: 230px;
  height: 215px;
  border-radius: 8px;
}
.theme-content-text {
  color: #ffffff;
  font-size: 18px;
  position: absolute;
  bottom: 14px;
  margin-left: 15px;
}
.single-theme {
  margin-right: 15px;
  box-shadow: 0 20px 10px #e1e3ea;
}
.middle-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 40px 0;
  height: 280px;
}
.card-single {
  height: 70px;
  padding-top: 70px;
  padding-right: 180px;
  border-right: 1px solid #999999;
  text-align: center;
  color: #999999;
}
.card-single-special {
  height: 70px;
  padding-top: 70px;
  padding-right: 55px;
  text-align: center;
  color: #999999;
}
.card-top {
  font-size: 17px;
  font-weight: 560;
  margin-bottom: 3px;
}
.hot-resource {
  width: 1190px;
}
.hot-resource-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hot-resource-top-title {
  font-size: 18px;
  font-weight: 560;
}
.hot-resource-top-content {
  width: 1050px;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hot-resource-top-content span {
  margin-left: 40px;
}
.hot-resource-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}
.hot-resource-bottom-title {
  font-size: 18px;
  font-weight: 560;
}
.hot-resource-bottom-content {
  width: 1050px;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hot-resource-bottom-content span {
  margin-left: 30px;
}
.footer {
  display: flex;
  margin-top: 80px;
}
.information {
  font-size: 18px;
  margin-bottom: 10px;
}
.information-content {
  color: #7d7e80;
}
.footer-item {
  margin-right: 270px;
}
.information-content {
  margin: 10px 0 4px;
}
.qualifications {
  padding: 30px 0 20px 0;
  color: #7d7e80;
}
</style>